<template>
  <div class="min-container">
    <div>
      <client-title title="热门行业解决方案" class="content-title" />
      <div class="work">
        <el-row :gutter="0">
          <el-col
            :span="24"
            :xs="24"
            :sm="24"
            :md="12"
            v-for="(i, index) in workData"
            class="item"
            :key="index"
          >
            <el-image style="width: 100%; height: 10.9375rem" :src="i.url" fit="cover" />
          </el-col>
        </el-row>
      </div>
    </div>
    <div>
      <client-title title="解决方案" class="content-title" />
      <div>
        <soultionList />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import ClientTitle from "@/components/client-title/client-title.vue";
import soultionList from "./solutionList/soultionList.vue";
import { getAssetURL } from "@/utils/load_assets";
const workData = ref<any>([
  { url: getAssetURL("client/solution/1.png") },
  { url: getAssetURL("client/solution/2.png") },
  { url: getAssetURL("client/solution/3.png") },
  { url: getAssetURL("client/solution/4.png") },
  { url: getAssetURL("client/solution/5.png") },
  { url: getAssetURL("client/solution/6.png") },
]);
</script>
<style lang="less" scoped>
.content-title {
  margin: 1.875rem;
}
.work {
  .el-col:nth-child(2n-1) {
    margin-right: -1.25rem;
  }
  .el-col:nth-child(2n) {
    margin-left: -1.25rem;
  }
}
</style>
